<template>
  <div id="nav">
    <inputgoods></inputgoods>
    <div class="detail">
      <div class="left">
        <div class="img">
          <div v-show="topShow" class="top" :style="topStyle"></div>
          <img class="big" :src="logo" alt="" @error="reload" />
          <div
            class="maskTop"
            @mouseenter="enterHandler"
            @mousemove="moveHandler"
            @mouseout="outHandler"
          ></div>
        </div>
        <div class="prcs">
          <img
            :class="logo == item.pics_sma ? 'active' : ''"
            class="small"
            @click="targetImg(item.pics_sma)"
            @error="reload"
            v-for="item in detaillist.pics"
            :key="item.pics_id"
            :src="item.pics_sma"
            alt=""
          />
        </div>
      </div>
      <div class="right">
        <div class="mask" v-show="rShow">
          <img class="mag" :src="logo" alt="" :style="r_img" />
        </div>
        <p class="title">{{ detaillist.goods_name }}</p>
        <p class="price">￥{{ detaillist.goods_price }}</p>
        <div class="arrt">
          <p v-for="item in detaillist.attrs" :key="item.attr_id">
            {{ item.attr_name }}: <span>{{ item.attr_vals }}</span
            ><span>{{ item.attr_value }}</span>
          </p>
           
          <el-button @click="add(detaillist.goods_id)" type="primary"> 加入购物车</el-button>
        </div>
      </div>
    </div>
    <p class="more">更多>>>></p>
    <div v-html="detaillist.goods_introduce"></div>
  </div>
</template>

<script>
import { detail } from "../request/goods/goods";
import Inputgoods from "./inputgoods.vue";
import navlist from "./navlist.vue";
import $ from "jquery";
export default {
  components: { navlist, Inputgoods },
  name: "VueDeatil",

  data() {
    return {
      detaillist: {},
      logo: "",
      topStyle: { transform: "" },
      r_img: {},
      topShow: false,
      rShow: false,
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    async init() {
      var goods_id = await this.$route.query.id;
      detail({ goods_id })
        .then((res) => {
          this.detaillist = res.message;
          this.logo = res.message.goods_small_logo;
        })
        .catch((err) => {});
    },
    //切换图片
    targetImg(src) {
      this.logo = src;
    },
    //处理图片
    reload() {
      event.target.src =
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201706%2F19%2F20170619001755_dtHZv.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641354085&t=7e7fccd04090184415674d69dcf4a803";
    },
    enterHandler() {
      this.topShow = true;
      this.rShow = true;
    },
    moveHandler(event) {
      // 鼠标的坐标位置
      let x = event.offsetX;
      let y = event.offsetY;
      // 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
      let topX = x - 100 < 0 ? 0 : x - 100;
      let topY = y - 100 < 0 ? 0 : y - 100;
      // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
      if (topX > 200) {
        topX = 200;
      }
      if (topY > 200) {
        topY = 200;
      }
      // 通过 transform 进行移动控制
      this.topStyle.transform = `translate(${topX}px,${topY}px)`;
      this.r_img.transform = `translate(-${2 * topX}px,-${2 * topY}px)`;
    },
    // 鼠标移出函数
    outHandler() {
      // 控制层罩与放大空间的隐藏
      this.topShow = false;
      this.rShow = false;
    },
    add(id) {
      var ids = [id];
      // sessionStorage.setItem("id", id);
      ids = ids.concat(sessionStorage.getItem("id"));
      if(sessionStorage.getItem("id")){
        if(sessionStorage.getItem("id").includes(id)){
       return this.$message.error("请勿重复添加")
      }
      }
      sessionStorage.setItem("id", ids);
      this.$message.success("加入购物车成功")
    },
  },
};
</script>

<style  scoped>
.detail {
  border: 1px solid #a9a9a9;
  width: 1200px;
  display: flex;
  justify-content: space-between;
}
.detail .left .big {
  width: 400px;
  height: 400px;
}
.detail .left .small {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.img {
  position: relative;
  cursor: move;
}
.top {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;
}
.maskTop {
  width: 400px;
  height: 400px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}
.detail .left .small.active {
  border: 1px solid #333;
  padding: 2px;
}
.detail .right {
  position: relative;
  width: 700px;
  padding: 0 0 0 20px;
}
.mask {
  position: absolute;
  left: 0;
  top: 0px;
  width: 400px;
  height: 400px;
  z-index: 999;
  overflow: hidden;
}
.mask .mag {
  position: absolute;
  top: 0;
  margin: 0;
  width: 800px;
  height: 800px;
}
.detail .right .title {
  line-height: 1;
  font-size: 20px;
  font-weight: 700;
  color: #000;
  padding-top: 10px;
  text-align: left;
}
.detail .right .arrt p {
  line-height: 36px;
  color: #999;
  text-align: left;
}
.detail .right .arrt p span {
  color: #ff0036;
  font-weight: 700;
  margin-left: 3px;
}
.detail .right .price {
  margin-top: 20px;
  vertical-align: middle;
  font-size: 30px;
  color: #ff0036;
  font-weight: bolder;
  font-family: Arial;
  -webkit-font-smoothing: antialiased;
}
.more {
  font-weight: 700;
  font-size: 40px;
  text-align: center;
  margin: 30px;
}
</style>